<!-- 年度预算的卡片 -->
<template>
  <el-card  class="annual-budget-card">
    <div slot="header" class="card-header clearfix">
      <span class="title">（{{annualBudget.nd}}年度）经费支出预算</span>
      <el-button class="button" type="danger" size="mini" @click="$emit('card-delete', annualBudget)">删除</el-button>
    </div>
    <el-form class="budget-form" :ref="'budgetForm'" :model="annualBudget" :rules="annualBudget"
    label-position="right" label-width="120px" size="mini" status-icon>
      <el-row>
        <el-col :md="8">
          <el-form-item label="年度：">
            <el-date-picker style="width:100%;"
              v-model="annualBudget.nd"
              type="year"
              value-format="yyyy"
              placeholder="选择年">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :md="8">
          <el-form-item label="上级部门资助：" prop="sjbmzz">
              <el-input v-model="annualBudget.sjbmzzje">
                <template slot="prepend">￥</template>
              </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8">
          <el-form-item label="学校资助：" prop="xxzz">
              <el-input v-model="annualBudget.xxzzje">
                <template slot="prepend">￥</template>
              </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :md="8">
          <el-form-item label="院系配套：" prop="yxpt">
            <el-input v-model="annualBudget.yxtr">
                <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8">
          <el-form-item label="自筹：" prop="zcjf">
            <el-input v-model="annualBudget.zc">
                <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :md="8">
          <el-form-item label="其他：" prop="qtjf">
            <el-input v-model="annualBudget.qt">
                <template slot="prepend">￥</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
        <!-- <el-col :md="6"> -->
          <span>合计：￥{{jfhj}}</span>
        <!-- </el-col> -->
    </el-form>
    <el-row>
      <el-button type="success" icon="el-icon-plus" size="mini" style="margin:5px 0px;float:left;" 
      @click="onBudgetAdd('budget')">增加项目</el-button>
    </el-row>
    <el-table :data="annualBudget.budgets" stripe border size="medium" style="width: 100%;height:100%">
      <template v-for="(col, index) in budgetColumns">
        <el-table-column :key="index" v-if="!col.hidden" :prop="col.prop" :label="col.label" :width="col.width"
        :align="col.align?col.align:'left'" :header-align="col.headerAlign?col.headerAlign:'left'">
          <template slot-scope="scope">
            <span v-if="col.renderer" v-html="col.renderer(scope,col.prop)">
            </span>
            <span v-else v-text="scope.row[col.prop]">
            </span>
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="scope">
          <el-button class="edit-btn" type="text" size="small" @click="onBudgetEdit(scope.row,'budget', $event)">修改</el-button>
          <el-button class="delete-btn" type="text" size="small" @click="onBudgetDelete(scope.row,'budget', $event)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 经费预算dlg -->
    <el-dialog title="经费预算明细(年度)" width="30%" :visible.sync="budgetDlgVisible">
      <el-form ref="budgetDetailForm" :model="budgetRecord" :rules="budgetRules"
      label-position="right" label-width="130px" size="mini" status-icon v-loading="budgetLoading">
        <el-form-item label="经费支出科目：" prop="jfzckm">
          <el-input v-model="budgetRecord.jfzckm"></el-input>
        </el-form-item>
        <el-form-item label="用途说明：" prop="ytsm">
          <el-input v-model="budgetRecord.ytsm"></el-input>
        </el-form-item>
        <el-form-item label="金额（元）：" prop="je">
          <!-- <el-input v-model="budgetRecord.je"></el-input> -->
          <el-input-number style="width:100%;" v-model="budgetRecord.je" :min="0" label="输入金额"></el-input-number>
        </el-form-item>
        <el-row>
          <el-button @click="onBudgetConfirm('budget')" type="primary" size="mini">确定</el-button>
          <el-button @click="budgetDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
  </el-card>
  
</template>
<script>
import SimplePanel from "@/components/basic/SimplePanel";
import TablePanel from "@/components/basic/TablePanel";
import DynamicTable from "@/components/basic/DynamicTable";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";

var budget = "budget";

var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var loadAttr = "Loading";

// 预算支出明细
var budgetColumns =[
  {
    prop:"ndjfysghmxbh",
    label:"年度经费预算规划明细编号",
    hidden:true
  },
  {
    prop:"xh",
    label:"序号",
    width:60,
    type:"myIndex"
  },
  {
    prop:"jfzckm",
    label:"经费支出科目",
    width:200,
    type:"input"
  },
  {
    prop:"ytsm",
    label:"用途说明",
    type:"input"
  },
  {
    prop:"je",
    label:"金额",
    width:200,
    type:"number"
  }
];

export default {
  name:"AnnualBudgetCard",
  props:{
    annualBudget:{
      type:Object,
      default:()=>{
        return { 
        };
      }
    }
  },
  components:{
    "simple-panel": SimplePanel,
    "table-panel": TablePanel
  },
  computed:{
    jfhj:function(){//经费合计
      var me = this;
      var sjbmzzje = parseFloat(me.annualBudget.sjbmzzje);
      var xxzzje   = parseFloat(me.annualBudget.xxzzje);
      var yxtr     = parseFloat(me.annualBudget.yxtr);
      var zc       = parseFloat(me.annualBudget.zc);
      var qt       = parseFloat(me.annualBudget.qt);
      if(Number.isNaN(sjbmzzje+xxzzje+yxtr+zc+qt)){
        return 0;
      }else{
        return sjbmzzje+xxzzje+yxtr+zc+qt;
      }
      
    }
  },
  methods:{
     onBudgetAdd:function(tname){// 预算-创建
      var me = this;
      me[tname + recordAttr] = formModelInitFromTable(
        me[tname + columnsAttr]
      );
      me[tname + recordAttr].sfqy = "1"; // 创建时，有效否是选中的
      
      console.log(me[tname + recordAttr]);
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetEdit:function(row,tname){// 预算-编辑
      var me = this;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;
    },
    onBudgetDelete:function(row,tname){// 预算-删除
      let me = this;  
      me.$confirm("确定删除这条记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        me.annualBudget.budgets.splice(me.annualBudget.budgets.indexOf(row),1);
          // me.deleteRequest(`/${url}/${row[key]}`).then((resp)=>{
          //   if(resp.status == 200) {
          //     me.$message.success("删除成功!");
          //   }else{
          //     me.$message.error('删除失败！');
          //   }
          // });
      }).catch(() => {});

    },
    onBudgetConfirm:function(tname) {//
      var me = this;
      let record = {};
      me.$refs.budgetDetailForm.validate(valid => {
        if (valid) {
          //  /static/data/testSuc.json
          me.annualBudget.budgets.push(me[tname + recordAttr]);
          me[tname + dlgVisibleAttr] = false;
        } else {
          me.$message.error("表单信息有误！");
        }
      });
    }
  },
  data(){
    return {
      [budget + columnsAttr]:budgetColumns,// 预算支出
      [budget + recordAttr]:{},
      [budget + rulesAttr]:{},
      [budget + dlgVisibleAttr]:false,
      [budget + loadAttr]:false
    }
  },
  created:function(){
    console.log("card=",this.annualBudget);
  }
}
</script>
<style lang="scss">
.annual-budget-card {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  width: 90%;

  .el-card__header{
    padding: 10px 15px;
  }

  .title{
    float:left;
    padding: 0;
    margin: 0;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }
  
  .button{
    float: right; 
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

}
</style>
